<template>
    <div class="jianzhan-content">
        <el-table
                :data="list"
                style="width: 100%">
            <el-table-column>
                <template slot-scope="scope">
                    <div>{{scope.row.shipInformation}}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="boxNumber"
                    label="Box Number"
            >
            </el-table-column>
            <el-table-column
                    prop="totalNumber"
                    label="Total Number"
            >
            </el-table-column>
            <el-table-column
                    prop="totalAmount"
                    label="Total Amount"
            >
            </el-table-column>
            <el-table-column
                    prop="sppb"
                    label="SPPB"
            >
                <template slot-scope="scope">
                    <a :href="scope.row.sppb" style="color: #409eff">{{$t('download')}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    :label="$t('operate')"
            >
                <template slot-scope="scope">
                    <el-button type="primary" @click="detail(scope.row)">{{$t('detail')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :visible.sync="dialogVisible"
                width="90%"
        >
            <el-table
                    :data="partList"
                    :show-summary="true"
                    style="width: 100%">
                <el-table-column
                        prop="partsNumber"
                        label="Part No"
                >
                </el-table-column>
                <el-table-column
                        prop="denomination"
                        label="Part Name"
                >
                </el-table-column>
                <el-table-column
                        prop="designation"
                        label="Part Name"
                >
                </el-table-column>
                <el-table-column
                        prop="packingQuantity"
                        label="QTY">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import {ERROR_OK} from "../../util/config";
    import {getShipInfoById} from "../../api/service";
    import {getChartDataByShip} from "../../api/shanxi";

    export default {
        name: "ship",
        created() {
            this.getShipInfo()
        },
        data() {
            return {
                list: [],
                partList: [],
                dialogVisible: false
            }
        },
        methods: {
            async detail(row) {
                const {status, data} = await getShipInfoById(row.id)
                if (status === ERROR_OK) {
                    this.partList = data
                }
                this.dialogVisible = true
            },
            async getShipInfo() {
                const {status, data} = await getChartDataByShip()
                if (status === ERROR_OK) {
                    this.list = data
                }
            }
        }
    }
</script>

<style scoped>

</style>